<!DOCTYPE html>
<html>
<head>
    <meta CHARSET="UTF-8">
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <title>INSERT title here</title>
    <script>
        $(function (){
            $.ajax({
                url: "user/users",
                data:"pn=1",
                type: "get",
                success: function (result){
                    $("#currentPage").text(result.pageNum);
                    $("#pages").text(result.pages);
                    $("#total").text(result.total);
                    buildUsersTab(result);
                    buildNavTab(result);
                }
            })
        })
        // 获取第几页的数据
        function toPage(pn) {
            console.log("获取第" + pn  + "页数据");
            $.ajax({
                url: "encomic/users",
                data: "pn="+pn,
                type:"GET",
                success:function (result) { // 这里面是不是就包括有当前页是第几页
                    // console.log("第" + pn +"页数据",result)
                    // 重新构建数据table
                    buildUsersTab(result);
                    // 重新构建分页条
                    buildNavTab(result);
                    // 更新表格左下角的页码
                    updateCurrentPage(result.pageNum);
                }
            });
        }

        function updateCurrentPage(pageNum) {
            $("#currentPage").text(pageNum);
        }

        // 构建分页条
        function buildNavTab(result) {

            // $("#userstab tbody").empty(); // 这个是去掉表格数据
            $("#pnav").empty();
            var ul = $("<ul></ul>").addClass("pagination")
            var firstPageLi = $("<li></li>").append($("<a onclick='toPage(1)'></a>").append("首页").attr("href","#"));
            var prePageLi;
            var nexPageLi;
            if (!result.hasPreviousPage) {
                prePageLi = $("<li></li>").addClass("disabled").append($("<a onclick='toPage("+(result.pageNum-1)+")'></a>").append("&laquo;").attr("href","#")); // 上一页
            } else {
                prePageLi = $("<li></li>").append($("<a onclick='toPage("+(result.pageNum-1)+")'></a>").append("&laquo;").attr("href","#")); // 上一页
            }
            if (!result.hasNextPage) {
                nexPageLi = $("<li></li>").addClass("disabled").append($("<a onclick='toPage("+(result.pageNum+1)+")'></a>").append("&raquo;").attr("href","#")); // 下一页
            } else {
                nexPageLi = $("<li></li>").append($("<a onclick='toPage("+(result.pageNum+1)+")'></a>").append("&raquo;").attr("href","#")); // 下一页
            }

            var lastPageLi = $("<li></li>").append($("<a onclick='toPage("+result.pages+")'></a>").append("尾页").attr("href","#"));
            ul.append(firstPageLi).append(prePageLi);
            // 遍历总的页数
            $.each(result.navigatepageNums,function (index,item){ // item 是分页条上的页码
                // 选中页要成为激活状态active
                var numli;
                if (result.pageNum == item) { // 后台返回的数据显示在表格里的页的数据（有个第几页） == 当前点的页码
                    numli = $("<li></li>").addClass("active").append($("<a onclick='toPage("+item+")'></a>").append(item));
                } else {
                    numli = $("<li></li>").append($("<a onclick='toPage("+item+")'></a>").append(item));
                }
                ul.append(numli);
            });
            ul.append(nexPageLi).append(lastPageLi);
            var nav = $("<nav></nav>").append(ul);
            nav.appendTo("#pnav");
        }
        function buildUsersTab(obj) {
            $("#userstab tbody").empty();
            // 得到obj中的LIST
            var TEconomicOrganizations = obj.list;
            // users：遍历的集合list
            // item：每一条数据
            console.log(TEconomicOrganizations)
            $.each(TEconomicOrganizations, function (index, item) {
                var checkbox = $("<td></td>").append($("<input type='checkbox' onclick='getselectId("+item.id+")'>"))
                var id = $("<td id='nonId' name='nonId'></td>").append(item.id);
                var name = $("<td></td>").append(item.name);
                var type = $("<td></td>").append(item.type);
                var time = $("<td></td>").append(item.time);
                var note = $("<td></td>").append(item.note);
                var deleteBtn = $("<td></td>").append($("<button type='button' onclick='rightdeleteById("+item.id+")'>删除</button>").addClass("btn btn-dangr"));
                var editBtn = $("<td></td>").append($("<button type='button' class='btn btn-primary' data-toggle='modal' data-target='#myModal6' onclick='editId("+JSON.stringify(item)+")'>更改</button>").addClass("btn btn-info"));
                var btnTd = $("<td></td>").append(deleteBtn).append(editBtn);
                if (item.isDelete == 0){
                    var is_delete = $("<td></td>").append("正常");
                }else {
                    var is_delete = $("<td></td>").append("异常");
                }
                $("<tr></tr>")
                    .append(checkbox)
                    .append(id)
                    .append(name)
                    .append(type)
                    .append(is_delete)
                    .append(note)
                    .append(time)
                    .append(deleteBtn)
                    .append(editBtn)
                    .append(btnTd)
                    .appendTo("#userstab tbody");
            });
        }
        function submitForm(event){
            event.preventDefault()
            $.ajax({
                url:"user/selectByInput",
                data:{name:document.getElementById("rdata").value,
                    type:document.getElementById("rdata2").value,
                    isDelete:document.getElementById("rdata3").value,
                    startTime:document.getElementById("rdata4").value,
                    endTime:document.getElementById("rdata5").value
                },
                contextType:"application/json;charset=utf-8",
                type:"post",
                success:function (obj){
                    $("#userstab tbody").empty();
                    $.each(obj, function (index, item) {
                        var checkbox = $("<td></td>").append($("<input type='checkbox' onclick='function getselectId("+item.id+")'>"))
                        var id = $("<td id='nonId' name='nonId'></td>").append(item.id);
                        var name = $("<td></td>").append(item.name);
                        var type = $("<td></td>").append(item.type);
                        var time = $("<td></td>").append(item.time);
                        var note = $("<td></td>").append(item.note);
                        var deleteBtn = $("<td></td>").append($("<button type='button' onclick='rightdeleteById("+item.id+")'>删除</button>").addClass("btn btn-dangr"));
                        var editBtn = $("<td></td>").append($("<button type='button' class='btn btn-primary' data-toggle='modal' data-target='#myModal5' onclick='editId("+JSON.stringify(item)+")'>更改</button>").addClass("btn btn-info"));
                        var btnTd = $("<td></td>").append(deleteBtn).append(editBtn);
                        if (item.isDelete == 0){
                            var is_delete = $("<td></td>").append("正常");
                        }else {
                            var is_delete = $("<td></td>").append("异常");
                        }
                        $("<tr></tr>")
                            .append(checkbox)
                            .append(id)
                            .append(name)
                            .append(type)
                            .append(is_delete)
                            .append(note)
                            .append(time)
                            .append(deleteBtn)
                            .append(editBtn)
                            .append(btnTd)
                            .appendTo("#userstab tbody");
                    })
                }
            })
        }
        function savetData(){
            let user = {
                name:document.getElementById("value1").value,
                type:document.getElementById("value2").value,
                note:document.getElementById("value3").value
            }
            $.ajax({
                url:"user/insert",
                type:"post",
                contentType:"application/json;charset=utf-8",
                data:JSON.stringify(user),
                success:function (res){
                    if (res=="Y"){
                        alert("添加成功!")
                        location.reload()
                    }else if (res == "E"){
                        alert("此类型已存在!")
                    }else {
                        alert("请检查必填项是否添加重新添加!")
                    }
                }
            })
        }
        function getselectId(id){
            document.getElementById("getId").value = id;
        }
        function selecetUserById(id){
            $.ajax({
                url:"user/selectById",
                data:{id:id},
                type:"get",
                contentType:"application/json;charset=utf-8",
                success:function (item){
                    console.log(item)
                    document.getElementById("values1").value = item.name
                    document.getElementById("values2").value = item.type
                    document.getElementById("values3").value = item.note
                }
            })
        }
        function editUser(){
            selecetUserById(document.getElementById("getId").value)
        }
        function updateData(){
            let user = {
                id:document.getElementById("getId").value,
                name:document.getElementById("values1").value,
                type:document.getElementById("values2").value,
                note:document.getElementById("values3").value
            }
            $.ajax({
                url:"user/update",
                type:"post",
                contentType:"application/json;charset=utf-8",
                data:JSON.stringify(user),
                success:function (res){
                    if (res=="Y"){
                        alert("修改成功!")
                        location.reload()
                    }else{
                        alert("请重试!")
                    }
                }
            })
        }
        function deleteById(){
            var id = document.getElementById("getId").value;
            $.ajax({
                url:"user/deleteById",
                data: {id: id},
                type: "get",
                contentType: "text",
                success: function (obj) {
                    if (obj == "Y") {
                        alert("删除成功")
                        location.reload()
                    } else {
                        alert("删除失败!请联系管理员")
                    }
                }
            })
        }
        function rightdeleteById(id){
            console.log(id)
            $.ajax({
                url:"user/deleteById",
                data: {id: id},
                type: "get",
                contentType: "text",
                success: function (obj) {
                    if (obj == "Y") {
                        alert("删除成功")
                        location.reload()
                    } else {
                        alert("删除失败!请联系管理员")
                    }
                }
            })
        }
        function submitFormDefault(event){
            event.preventDefault();
            location.reload()
        }
        function editId(item){
            document.getElementById("editId").value = item.id;
            document.getElementById("valuess1").value = item.name
            document.getElementById("valuess2").value = item.type
            document.getElementById("valuess3").value = item.note
        }
        function updateData1(){
            let user = {
                id:document.getElementById("editId").value,
                name:document.getElementById("valuess1").value,
                type:document.getElementById("valuess2").value,
                note:document.getElementById("valuess3").value
            }
            $.ajax({
                url:"user/update",
                type:"post",
                contentType:"application/json;charset=utf-8",
                data:JSON.stringify(user),
                success:function (res){
                    if (res=="Y"){
                        alert("修改成功!")
                        location.reload()
                    }else{
                        alert("请重试!")
                    }
                }
            })
        }
        function excelOut(){
            $.ajax({
                url:"user/excelOut",
                type:"post",
                success:function (res){
                    alert("111")
                }
            })
        }
    </script>
</head>
<body>
<form class="form-inline" NAME="id" id="id">
    <input id="getId" TYPE="hidden">
    <DIV class="form-group">
        字典名称：<input TYPE="text" class="form-control" NAME="id" id="rdata"/>
        字典类型：<input TYPE="text" class="form-control" NAME="id" id="rdata2"/>
        字典状态：
        <SELECT id="rdata3" class="form-control">
            <OPTION VALUE="正常">正常</OPTION>
            <OPTION VALUE="异常">异常</OPTION>
        </SELECT>
        创建时间：
        <input TYPE="date" id="rdata4">-
        <input TYPE="date" id="rdata5">
    </DIV>
    <DIV class="form-group">
        <button class="btn btn-success selectUser selectRes" onclick="submitForm(event)" TYPE="submit">查询</button>
        <button class="btn btn-warning" onclick="submitFormDefault(event)" TYPE="submit">重置</button>
    </DIV><br><br>
    <button  TYPE='button' class='btn btn-primary btn btn-info' DATA-toggle='modal' DATA-target='#myModal4' onclick="submitForm(event)">新增</button>
    <button TYPE="button" class="btn btn-success" onclick="editUser()" DATA-toggle='modal' DATA-target='#myModal5' >修改</button>
    <button TYPE="button" class="btn btn-danger" onclick="deleteById()">删除</button>
    <button  TYPE='button' class='btn btn-primary btn btn-success' onclick="excelOut()">EXCEL导出</button>
    <DIV class="modal fade" id="myModal5" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
        <DIV class="modal-dialog" role="document">
            <DIV class="modal-content">
                <DIV class="modal-header">
                    <button TYPE="button" class="close" DATA-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel5">编辑</h4>
                </DIV>
                <DIV class="modal-body">
                    <input TYPE="hidden" id="editId1">
                    字典名称：<input TYPE="text" id="values1"><font color="red">*必填</font><br><br>
                    字典类型：<input TYPE="text" id="values2"><font color="red">*必填</font><br><br>
                    备注：<input TYPE="text" id="values3"><font color="red">*必填</font><br><br>
                    <DIV class="modal-footer">
                        <button TYPE="button" class="btn btn-default" DATA-dismiss="modal">关闭</button>
                        <button TYPE="button" class="btn btn-primary" onclick="updateData()">保存更改</button>
                    </DIV>
                </DIV>
            </DIV>
        </DIV>
    </DIV><DIV class="modal fade" id="myModal6" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
    <DIV class="modal-dialog" role="document">
        <DIV class="modal-content">
            <DIV class="modal-header">
                <button TYPE="button" class="close" DATA-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel6">编辑</h4>
            </DIV>
            <DIV class="modal-body">
                <input TYPE="hidden" id="editId">
                字典名称：<input TYPE="text" id="valuess1"><font color="red">*必填</font><br><br>
                字典类型：<input TYPE="text" id="valuess2"><font color="red">*必填</font><br><br>
                备注：<input TYPE="text" id="valuess3"><font color="red">*必填</font><br><br>
                <DIV class="modal-footer">
                    <button TYPE="button" class="btn btn-default" DATA-dismiss="modal">关闭</button>
                    <button TYPE="button" class="btn btn-primary" onclick="updateData1()">保存更改</button>
                </DIV>
            </DIV>
        </DIV>
    </DIV>
</DIV>
    <DIV class="modal fade" id="myModal4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <DIV class="modal-dialog" role="document">
            <DIV class="modal-content">
                <DIV class="modal-header">
                    <button TYPE="button" class="close" DATA-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel4">新增数据</h4>
                </DIV>
                <DIV class="modal-body">
                    字典名称：<input TYPE="text" id="value1"><font color="red">*必填</font><br><br>
                    字典类型：<input TYPE="text" id="value2"><font color="red">*必填</font><br><br>
                    备注：<input TYPE="text" id="value3"><font color="red">*必填</font><br><br>
                </DIV>
                <DIV class="modal-footer">
                    <button TYPE="button" class="btn btn-default" DATA-dismiss="modal">关闭</button>
                    <button TYPE="button" class="btn btn-primary" onclick="savetData()">保存新增</button>
                </DIV>
            </DIV>
        </DIV>
    </DIV>
</form>
<TABLE class="table table-striped" id="userstab">
    <thead>
    <th><input TYPE="checkbox"></th>
    <th>字典主键</th>
    <th>字典名称</th>
    <th>字典类型</th>
    <th>状态</th>
    <th>备注</th>
    <th>创建时间</th>
    <th>操作</th>
    <th>操作</th>
    </thead>
    <tbody>
    <!-- 显示遍历出来的用户数据 -->
    </tbody>
    <tfoot>
    <tr>
        <td colspan="3">
            当前<span id="currentPage"></span>页，共有<span id="pages"></span>页，共有<span id="total"></span>条数据

        </td>
        <td colspan="5" align="center">

            <nav aria-label="Page navigation" id="pnav">
                <ul class="pagination">
                    <li class="disabled">
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li><a href="#">1</a></li>
                    <li class="active"><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </td>
    </tr>
    </tfoot>
</TABLE>
</body>
</html>